<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="switch-container">
    <!--<div class="switch-item" :class="[c_index==index?choose:no_choose]" v-for="(index,item) in list" v-on:click="clickSwitchItem(index)">{{item}}</div>-->
    <slot></slot>
  </div>
</template>
<script>
  const init = 0;
  const items = [
      '本周热门',
      '新品推荐'
  ];
  export default{
      data(){
          return {
            c_index:init,
            list:items,
            choose:'choosed',
            no_choose:'no-choosed'
          }
      },
      methods:{
        clickSwitchItem(index){
          console.log(index)
          console.log(this.c_index)
          /*this.classList[index] = 'choosed';
          this.classList[this.c_index] = 'no-choosed';*/
          this.c_index = index;
          this.$emit('switchChange',1);
        }
      }
  }
</script>
<style>
  .switch-container{
    width: 100%;
    height: 50px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-container .switch-item{
    flex: 1;
    font-size: 1rem;
    text-align: center;
    height: 100%;
    line-height: 50px;
    background: white;
  }
  .choosed{
    border-bottom: 2px solid orange;
    color: orange;
  }
</style>
